<template>

  <h1>文章详情展示</h1>
  <h2>欢迎来到：{{ article.title }}</h2>
  <h4>摘要：{{ article.summary }}</h4>
  <p>作者：{{ article.author }} 阅读量：{{ article.readCt }}</p>

  <h1 style="color:red;">编辑文章</h1>
  标题： <input type="text" v-model="article.title" placeholder="edit me"/><br>
  <button @click="saveArticle">保存文章</button>
</template>

<script setup>

import {ref} from "vue";

const article = ref({
      title: "一小时构建Vue知识体系-default",
      summary: "关注方才兄，一小时构建Vue知识体系-default",
      author: "方才",
      imgUrl: "https://fangcaicoding.cn/oss/cover/css_learn.png",
      readCt: 12
    }
)

const saveArticle = () => {
  alert(article.value.title + "  文章已保存！")
}

</script>

<style scoped>
input, textarea {
  width: 500px;
  height: 50px;
  padding: 5px;
  margin-bottom: 10px;
}
</style>